<template>
  <el-dialog :title="$t('page.users.orderList.setStorage')" :visible.sync="dialogVisible" width="900px" :show-close="false" :close-on-click-modal="false" :close-on-press-escape="false"  v-loading="loading">
    <div class="">
      <el-form :model="formData" ref="formData" label-width="150px" class="demo-ruleForm">
        <el-form-item :label="$t('page.users.orderList.storageMode')"  prop="inboundType">
          <el-select @change="changeInboundType" v-model="formData.inboundType">
            <el-option
              :label="item.label"
              :value="item.value"
              v-for="(item, index) in storageModeList"
              :key="index"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-if="isShowDirect" :label="$t('page.users.orderList.selectProduct')"  prop="productCode">
          <el-radio-group
              style="width: 100%" @change="changeProduct" v-model="formData.productCode">
            <el-table
              border
              :data="productTable"
              max-height="200"
              style="width: 100%">
              <el-table-column width="40">
                <template slot-scope="scope">
                  <el-radio :label="scope.row.productCode">&nbsp;</el-radio>
                </template>
              </el-table-column>
              <el-table-column
                property="productName"
                :label="$t('page.users.orderList.productName')"
                align="center"/>
              <el-table-column
                property="prescription"
                :label="$t('page.users.orderList.ageing')"
                align="center"/>
              <el-table-column
                property="amount"
                :label="$t('page.users.orderList.projectedCost')"
                align="center"/>
            </el-table>
          </el-radio-group>
        </el-form-item>
        <el-row>
          <el-col :span="10">
            <el-form-item v-if="isShowDirect" :label="$t('page.users.orderList.transitWarehouse')" prop="transitWarehouseCode">
              <el-radio-group
              style="width: 100%" v-model="formData.transitWarehouseCode">
                <el-table
                  border
                  max-height="200"
                  :data="transitWarehouseTable"
                  style="width: 100%">
                  <el-table-column width="40">
                    <template slot-scope="scope">
                      <el-radio :label="scope.row.warehouseCode">&nbsp;</el-radio>
                    </template>
                  </el-table-column>
                  <el-table-column
                    property="warehouseName"
                    :label="$t('page.users.orderList.warehouseName')"
                    align="center">
                  </el-table-column>
                </el-table>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="14">
            <el-form-item :label="$t('page.users.orderList.destinationWarehouse')"  prop="destWarehouseCode">
              <el-radio-group
              style="width: 100%" v-model="formData.destWarehouseCode">
                <el-table
                  border
                  max-height="200"
                  :data="destWarehouseTable"
                  style="width: 100%">
                  <el-table-column width="40">
                    <template slot-scope="scope">
                      <el-radio :label="scope.row.warehouseCode">&nbsp;</el-radio>
                    </template>
                  </el-table-column>
                  <el-table-column
                    property="warehouseName"
                    :label="$t('page.users.orderList.warehouseName')"
                    align="center">
                  </el-table-column>
                  <el-table-column
                    property="totalQty"
                    :label="$t('page.users.orderList.temporaryStorageCapacity')"
                    align="center">
                  </el-table-column>
                </el-table>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item>
          <el-button @click="resetForm(true)">{{$t(`page.goodsDetail.cancel`)}}</el-button>
          <el-button :loading="loadingBtn" type="primary" @click="submitForm('formData')">{{$t('page.users.orderList.confirm')}}</el-button>
        </el-form-item>
      </el-form>
    </div>

  </el-dialog>
</template>

<script>
export default {
  components:{
    
  },
  props:{
  },
  data () {
    return {
      dialogVisible: false,
      loading: false,
      loadingBtn: false,
      formData: {
        inboundType: 'DIRECT',
        orderNos: [],
        productCode: '',
        transitWarehouseCode: '',
        destWarehouseCode: '',
      },
      productTable:[],
      transitWarehouseTable:[],
      destWarehouseTable:[],
    }
  },
  watch: {
  },
  computed: {
    // TRANSIT,DIRECT
    storageModeList() {
      return [
        {
          label: this.$t('page.users.orderList.spontaneous'),
          value: 'DIRECT',
        },
        {
          label: this.$t('page.users.orderList.transshipment'),
          value: 'TRANSIT',
        },
      ]
    },
    isShowDirect() {
      return this.formData.inboundType === 'TRANSIT'
    }
  },
  created () {
    
  },
  mounted () {
    
  },
  methods: {
    changeProduct(v) {
      const obj = this.productTable.find(op => op.productCode === v)
      if(obj) {
        this.transitWarehouseTable = obj.transitWarehouse
        this.destWarehouseTable = obj.storeWarehouse
      }
    },
    show(orderNos) {
      this.formData.orderNos = orderNos
      this.dialogVisible = true
      this.getOrderWarehouse()
      this.getOrderFmsProduct()
    },
    // 获取目的仓库 
    getOrderWarehouse() {
      this.loading = true
      const data = {orderNos: this.formData.orderNos}
      this.$axios.post('/api/front/order/getOrderWarehouse', data).then(res => {
        this.directData = res.data
        this.destWarehouseTable = res.data
      }).catch(err => {
      }).finally(() => {this.loading = false})
    },
    // 获取产品数据
    getOrderFmsProduct() {
      const data = {orderNos: this.formData.orderNos}
      this.$axios.post('/api/front/order/getOrderFmsProduct', data).then(res => {
        this.transitData = res.data
        this.productTable = res.data
      }).catch(err => {
      })
    },
    submitForm() {
      this.loadingBtn = true
      this.$axios.post('/api/front/order/saveOrderInboundInfo', this.formData).then(res => {
        if(res.code === 200) {
          const { failList, successList } = res.data
          if(failList.length === 0) {
            this.$message.success(this.$t('page.users.orderList.setStirageSuccess'))
          } else {
            // &@成功个数 @&失败个数
            this.$message.error(this.$t('page.users.orderList.setStirageError').replace('&@',successList.length).replace('@&',failList.length))
          }
          this.$emit('getList')
          this.resetForm()
        }
      }).catch(err => {
      }).finally(() => this.loadingBtn = false)
    },
    resetForm(tg) {
      this.dialogVisible = false
      this.$refs['formData'].resetFields();
      this.transitWarehouseTable = []
      if(tg) this.$emit('closeFunc')
    },
    changeInboundType() {
      this.formData.productCode = ''
      this.formData.transitWarehouseCode = ''
      this.formData.destWarehouseCode = ''
      if (this.isShowDirect) {
        this.transitWarehouseTable = []
        this.destWarehouseTable = []
      } else {
        this.destWarehouseTable = this.directData
      }
    }
  },
  destroyed () {
    
  }
};
</script>

<style lang="scss" scoped>

</style>